import Taro, {Component} from "@tarojs/taro";
import {View, Textarea, Input, Form, Button} from "@tarojs/components";
import {AtImagePicker} from 'taro-ui'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime,isPhone} from '../../utils/common'

import './index.less'
import './welfare_apply.less'

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Index extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    name: '', //姓名
    phoneNumber: '', // 电话
    logoImg: [], // 封面图
    logoImgSave: '', // 封面图
    publicWelfaresBanner: [],  // 头部banner图
    publicWelfaresBannerSave: '',  // 头部banner图
    introduce: '', // 简介
    description: '', // 详细信息
    amountOfApplication: '', // 申请募捐总金额 ,
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'申请资助' })
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  onChangeImg(type,e) {
    getRuntime().uploadFile(e, urls => {
      this.setState({
        [type+'Save']: urls.join(',')
      })
      getRuntime().showToast('上传图片成功~')
      // console.log(this.state[type+'Save'])
    })
    this.setState({
      [type]: e
    })
  }

  submit(e) {
    let { logoImgSave,publicWelfaresBannerSave } = this.state
    let {  name, phoneNumber, introduce, description, amountOfApplication } = e.detail.value
    let { PublicWelfareStore } = this.props.stores
    if(!name) { getRuntime().showToast('请填写姓名~'); return }
    if(!phoneNumber) { getRuntime().showToast('请填写联系电话~'); return }
    if(!isPhone(phoneNumber)) { getRuntime().showToast('联系电话格式不正确~'); return }
    if(!logoImgSave) { getRuntime().showToast('封面图片不能为空~'); return }
    if(!logoImgSave) { getRuntime().showToast('封面图片不能为空~'); return }
    if(!publicWelfaresBannerSave) { getRuntime().showToast('页面头部图片不能为空~'); return }
    if(!introduce) { getRuntime().showToast('简短描述信息不能为空~'); return }
    if(!description) { getRuntime().showToast('资助详情不能为空~'); return }
    PublicWelfareStore.savePublicWelfare({
      form: {
        name,
        phoneNumber,
        logoImg: logoImgSave,
        publicWelfaresBanner:publicWelfaresBannerSave,
        introduce,
        description,
        amountOfApplication
      },
      callback: res => {
        getRuntime().navigateTo('/pages/public_welfare/welfare_success')
      }
    })
  }

  render() {
    let { logoImg,publicWelfaresBanner } = this.state
    return (
      <View className='welfare-apply-from from-wrap'>
        <Form onSubmit={this.submit.bind(this)}>
          <View className='item-group-title'>联系方式</View>
          <View className='item-group pt0 pb0'>
            <View className='input-group'>
              <View className='input-name is-require'>姓名</View>
              <Input className='from-input' name='name' placeholderClass='placeholder_class' placeholder='请填写姓名' />
            </View>

            <View className='input-group'>
              <View className='input-name is-require'>联系电话</View>
              <Input className='from-input' name='phoneNumber' type={"number"} maxLength={11} placeholderClass='placeholder_class' placeholder='请填写联系电话' />
            </View>

            <View className='input-group is-require'>
              <View className='input-name is-require'>资助金额</View>
              <Input className='from-input' type='number' name='amountOfApplication' placeholderClass='placeholder_class' placeholder='请填写资助金额(元)' />
            </View>

            <View className='input-group input-upload'>
              <View className='input-name is-require'>上传封面图片(一张)</View>
              <AtImagePicker
                length={4}
                count={1}
                files={logoImg}
                name='logoImg'
                showAddBtn={logoImg.length<1}
                onChange={this.onChangeImg.bind(this,'logoImg')}
              />
            </View>

            <View className='input-group input-upload bbnone'>
              <View className='input-name is-require'>上传页面头部图片</View>
              <AtImagePicker
                length={4}
                count={3}
                files={publicWelfaresBanner}
                name='publicWelfaresBanner'
                onChange={this.onChangeImg.bind(this,'publicWelfaresBanner')}
              />
            </View>
          </View>

          <View className='input-group'>
            <Textarea className='from-textarea' placeholderClass='placeholder-class' name='introduce'
                      placeholder='请填写简短描述信息(必填)' />
          </View>

          <View className='interval' />


            <Textarea className='from-textarea' placeholderClass='placeholder-class' name='description'
                      placeholder='请填写您的资助情况(必填)' maxlength={-1} />

           {/* <View className='input-group input-upload'>
              <View className='input-name'>上传相关资料</View>
              <AtImagePicker
                length={4}
                count={3}
                files={this.state.files}
                onChange={this.onChangeImg.bind(this)}
              />
            </View>*/}


          <View className='btn-group'>
            <Button className='btn btn-line-submit' formType={"submit"} style={{background: '#de562f','margin-top':'40px'}}>确认提交</Button>
          </View>
        </Form>
      </View>
    )
  }
}

export default Index
